import {PageWrapperBox, WholePage, WholePageContent, WholePageHeader} from "@/layout/Page";
import {useParams} from "react-router-dom";
import {useEffect, useState} from "react";
import {getArtPictureByIdUrl} from "@/api/blog/article.ts";
import {Button, Empty, Image, Tag} from "antd";
import styles from "./index.module.scss"
import {getModalSystemConfig, globalMessageApi, globalModalApi} from "@/components/OpComponent/Message";
import {deleteFileUrl} from "@/api/file.ts";


function PictureWall(props: any) {
    const {pictureList, getList} = props


    const handleDelete = async (id: any) => {
        const confirmed = await globalModalApi.confirm(getModalSystemConfig("是否删除该照片?"));
        if (confirmed) {
            deleteFileUrl(id).then((res: any) => {
                globalMessageApi.success(res.msg)
                getList()
            })
        }
    }


    return <div className={styles.pictureWall}>
        {
            pictureList.map((item: any, index: number) => {
                return <div key={index} className={styles.onePicture}>
                    <div className={styles.pictureImg}>
                        <Image src={item.url} alt={""}></Image>
                    </div>
                    <div className={styles.pictureDate}>
                        <div className={styles.name}><span>文件名：</span>{item.fileName} ({120}MB)</div>
                        <div className={styles.name}><span>上传时间：</span>{item.putTime}</div>
                        <Tag color="green"
                             className={item.isUse ? "text-green-500" : "text-red-500"}>{item.isUse ? "正常使用" : "未使用"}</Tag>
                        {!item.isUse && <Button type="link" className={"text-red-500"}
                                                onClick={() => handleDelete(item.id)}>删除</Button>}
                    </div>
                </div>
            })
        }

    </div>
}


export default function () {
    const {artId}: any = useParams()
    const [pictureList, setPictureList] = useState([])

    const getList = () => {
        getArtPictureByIdUrl(artId).then((res: any) => {
            setPictureList(res.data || [])
        })
    }


    useEffect(() => {
        getList()
    }, [artId])

    return <PageWrapperBox>
        <WholePageHeader title={"文章图片"} to={"/blog/articles"}/>
        <WholePageContent>
            {
                pictureList.length > 0 ? <PictureWall pictureList={pictureList} getList={getList}/> : <Empty/>
            }
        </WholePageContent>
    </PageWrapperBox>
}
